<template>
  <section class="filter">
    <div class="filter-container">
      <el-form ref="form" :inline="true">
        <el-col>
          <el-form-item label="关键字：">
            <el-input v-model="codeName" placeholder="请输入代码名称对应关键字" style="width: 300px;" clearable @change="queryData" />
          </el-form-item>
          <el-button type="success" @click="queryData()">搜索</el-button>
          <el-button type="success" @click="addCode()">添加</el-button>
        </el-col>
      </el-form>
    </div>
  </section>
</template>
<script>

export default {
  props: ['changePage'],
  data () {
    return {
      codeName: '',
    }
  },
  methods: {
    //添加案例代码
    addCode(){
      this.$router.push({ path: '/code/modify'})
    },
    // 因为查询条件的变化  页码应该从第一页开始
    queryData () {
      const params = {
        body:{
          codeName: this.codeName.trim() ? this.codeName.trim() : null,
        },
        page:1
      }
      console.log(params)
      this.changePage && this.changePage(params) // 调用上层组件的查询方法
    }
  }
}
</script>
<style lang="scss" scoped>
.filter {
  height: 100px;
}
</style>
